<script setup>
import { ref, watch } from 'vue'
const props = defineProps(['currentPage', 'pageSize', 'total'])
const page = ref(1)
const size = ref(10)
watch(
  () => [props.currentPage, props.pageSize],
  ([newPage, newSize]) => {
    if (newPage !== undefined) page.value = newPage
    if (newSize !== undefined) size.value = newSize
  }
)
const emits = defineEmits(['pageSizeChangeEvent', 'currentPageChangeEvent'])
</script>

<template>
  <div class="pagination-component">
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="size"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="(newPageSize) => emits('pageSizeChangeEvent', { pageSize: newPageSize })"
      @current-change="(newCurrentPage) => emits('currentPageChangeEvent', { currentPage: newCurrentPage })"
    />
  </div>
</template>

<style scoped lang="scss"></style>
